<template>
   <div class="detail">

        <div class="search">

            <mt-search v-model="value" :result.sync="result"></mt-search>

        </div>
  
               <div v-for="(item,index) in book_name" class="imgDiv">      
                    <img :src="getbook_ico(index)" alt="" class="detailimg" @click="togo(index)">   
                    <div class="detailname" @click="togo(index)">{{book_name[index]}}</div>
                 
                    <div class="detailauthor" @click="togo(index)">{{book_author[index]}}</div> 
                    <mt-button size="small" class="detailbtn" >申请借阅</mt-button> 
                    <div class="line"></div>                
                </div>
                   

   </div>
</template>

<script>
    export default{
        data(){
            return{
                book_name:[
                    "自在独行","浮生六记","沉默的大多数","沉默的大多数","撒哈拉的故..","你是人间的..","当我跑步时..","皮囊"
                ],
               
                book_author:[
                    "贾平凹","作者2","王小波","王小波","三毛","林徽因","村上春树","蔡崇达"
                ],
                book_ico:[
                    "./src/assets/book/s01.jpg",
                    "./src/assets/book/s02.jpg",
                    "./src/assets/book/s03.jpg",
                    "./src/assets/book/s04.jpg",
                    "./src/assets/book/s05.jpg",
                    "./src/assets/book/s06.jpg",
                    "./src/assets/book/s07.jpg",
                    "./src/assets/book/s08.jpg",
                ],
                book_engName:[
                    "booo_1","booo_2","booo_3","booo_4","booo_5","booo_6","booo_7","booo_8"
                ]
            }
        },
        methods:{
             getbook_ico(i){
                return this.book_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id为书名的id，在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"booksView"});
            },
            togo(index){
                var id=this.book_engName[index];
                this.go(id);
            }
        }
    }
</script>

<style>
    .detail{
        background-color:#ffffff;
        height: auto;
        margin-top:6%;
        padding-bottom:200%;
        margin-bottom:-18%;
    }



    .detail .imgDiv {
        width:100%;     
        margin-left:5%;
        float: left;
        margin-top:10%;
              
    }

    .detail img {
        
        width: 29.5%;
        height: auto;
        margin-left:-65%; 
        
    }

  
    .detailauthor {
       margin-top: 7%;
       font-family: 华文行楷;
       font-size: 1em;
        color:#FF9900;
        
    }

    .detailname {
       margin-top:-35%; 
       font-family: 华文行楷;
      
       font-size: 1.5em;
       color:#FF9900;
        
    }


    .detailbtn {
        background-color:#99CC33;
        color: white;      
        margin-top:3%;
    }
    
    .line {
        border-top: 4px solid #CCCC99;
        height: 4px;
        margin-top:15%;
        margin-left:-5%;
    }

</style>